<template>
	<view>
		<view>
			<slot name="top"></slot>
		</view>
		<view class="ss-order-card-warp ss-flex ss-col-stretch ss-row-between bg-white"
			:style="[{ borderRadius: radius + 'rpx', marginBottom: marginBottom + 'rpx' }]">
			<view class="img-box ss-m-r-24">
				<image class="order-img" :src="sheep.$url.cdn(img)" mode="aspectFill"></image>
			</view>
			<view class="box-right ss-flex-col ss-row-between"
				:style="[{ width: titleWidth ? titleWidth + 'rpx' : '' }]">
				<view class="title-text ss-line-2" v-if="title">{{ title }}</view>
				<view v-if="skuString" class="spec-text ss-m-t-8 ss-m-b-12">{{ skuString }}</view>
				<view class="groupon-box">
					<slot name="groupon"></slot>
				</view>
				<view class="ss-flex">
					<view class="ss-flex ss-col-center">

						<view class="price-text ss-flex ss-col-center" :style="[{ color: priceColor }]"
							v-if="price && Number(price) > 0" :class="userInfo?.support_group_price == 1 && group_price && Number(group_price) > 0 ? 'textDecoration' : ''">
							￥{{ price }}
						</view>
						<view class="price-text ss-flex ss-col-center" :style="[{ color: priceColor }]"
							style="color: #ff3000;padding-left: 20rpx;" v-if="userInfo?.support_group_price == 1 && group_price && Number(group_price) > 0">
							会员价：￥{{ group_price }}
						</view>
						<view v-if="score && Number(price) > 0">+</view>
						<view class="price-text ss-flex ss-col-center" v-if="score">
							<image :src="sheep.$url.static('/assets/addons/shopro/uniapp/goods/score1.svg')"
								class="score-img"></image>
							<view>{{ score }}</view>
						</view>
						<view v-if="num" class="total-text ss-flex ss-col-center" style="padding-left: 30rpx;">x
							{{ num }}</view>
						<slot name="priceSuffix"></slot>
					</view>
				</view>
				<view class="tool-box">
					<slot name="tool"></slot>
				</view>
				<view>
					<slot name="rightBottom"></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import {
		computed
	} from 'vue';
	/**
	 * 订单卡片
	 *
	 * @property {String} img 											- 图片
	 * @property {String} title 										- 标题
	 * @property {Number} titleWidth = 0								- 标题宽度，默认0，单位rpx
	 * @property {String} skuText 										- 规格
	 * @property {String | Number} price 								- 价格
	 * @property {String} priceColor 									- 价格颜色
	 * @property {Number | String} num									- 数量
	 *
	 */
	// 用户信息
	const userInfo = computed(() => sheep.$store('user').userInfo);
	const props = defineProps({
		img: {
			type: String,
			default: 'https://img1.baidu.com/it/u=1601695551,235775011&fm=26&fmt=auto',
		},
		title: {
			type: String,
			default: '这是商品标题这是商品标题这是商品标题这是商品标题这是商品标题',
		},
		titleWidth: {
			type: Number,
			default: 0,
		},
		skuText: {
			type: [String, Array],
			default: '',
		},
		price: {
			type: [String, Number],
			default: '',
		},
		priceColor: {
			type: [String],
			default: '',
		},
		group_price:{
			type: [String, Number],
			default: '',
		},
		num: {
			type: [String, Number],
			default: 0,
		},
		score: {
			type: [String, Number],
			default: '',
		},
		radius: {
			type: [String],
			default: '',
		},
		marginBottom: {
			type: [String],
			default: '',
		},
	});
	const skuString = computed(() => {
		if (!props.skuText) {
			return '';
		}
		if (typeof props.skuText === 'object') {
			return props.skuText.join(',');
		}
		return props.skuText;
	});
</script>

<style lang="scss" scoped>
	.score-img {
		width: 36rpx;
		height: 36rpx;
		margin: 0 4rpx;
	}
	.textDecoration{
		text-decoration:line-through;
	}
	.ss-order-card-warp {
		padding: 20rpx;

		.img-box {
			width: 164rpx;
			height: 164rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.order-img {
				width: 164rpx;
				height: 164rpx;
			}
		}

		.box-right {
			flex: 1;
			// width: 500rpx;
			// height: 164rpx;
			position: relative;

			.tool-box {
				position: absolute;
				right: 0rpx;
				bottom: -10rpx;
			}
		}

		.title-text {
			font-size: 28rpx;
			font-weight: 500;
			line-height: 40rpx;
		}

		.spec-text {
			font-size: 24rpx;
			font-weight: 400;
			color: $dark-9;
			min-width: 0;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}

		.price-text {
			font-size: 24rpx;
			font-weight: 500;
			font-family: OPPOSANS;
		}

		.total-text {
			font-size: 24rpx;
			font-weight: 400;
			line-height: 24rpx;
			color: $dark-9;
			margin-left: 8rpx;
		}
	}
</style>